<template>
  <div class="article-detail" v-if="article">
    <div class="container">
      <div class="article-title text-center">
        <h3>{{ $wordpressDecodeHTML(article.title.rendered) }}</h3>
      </div>
      <!-- <div
        class="article-content wp-block-post-content"
        v-html="article.content.rendered"
      ></div> -->
      <div class="article-content" style="">
        <iframe
          id="articleIframe"
          style="width: 100%"
          scrolling="no"
          frameborder="0"
          :src="wordPressArticleUrl"
        >
        </iframe>
      </div>
      <div class="text-center">
        <a class="button" @click="goBack()">Back</a>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";

import { getArticleById } from "@/api/index";

export default {
  name: "ProjectDetail",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      article: { title: "", content: { rendered: "" } },
      wordPressArticleUrl: `/wordpress/archives/${proxy.$route.params.id}`,
    });
    const refData = toRefs(data);
    onBeforeMount(async () => {
      await methods.getDetail();
    });
    //
    onMounted(() => {
      var iframeObj = document.getElementById("articleIframe");
      iframeObj.onload = function () {
        proxy.$iframeAutoFit(iframeObj);
      };
    });
    //
    const methods = {
      goBack() {
        proxy.$router.go(-1);
      },
      async getDetail() {
        var id = proxy.$route.params.id;
        await getArticleById(id).then((res) => {
          data.article = res.data;
        });
      },
    };
    //

    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.article-detail {
  padding: 100px 0;

  .article-content {
    margin-top: 50px;
  }

  a.button {
    border-radius: 30px;
    padding: 20px 35px;
    line-height: 1;
    margin-top: 40px;
  }
}
</style>
